<template>
    <view class="strategy-container">
        <view class="favorite-top">
            <image class="bg-image" src="/static/erji-beijing.png" mode="aspectFill"></image>
            <view class="header-title">攻略</view>

            <view class="search-bar">
                <view class="search-input">
                    <image class="search-icon" src="/static/search.png" mode="aspectFit"></image>
                    <input type="text" v-model="searchKeyword" placeholder="搜索攻略" placeholder-class="placeholder" @input="handleSearch" />
                </view>
            </view>
        </view>

        <scroll-view class="strategy-list" scroll-y @scrolltolower="loadMore" @refresherrefresh="refresh" refresher-enabled :refresher-triggered="isRefreshing">
            <view class="strategy-item" v-for="(item, index) in strategyList" :key="index"
                @click="handleStrategyClick(item)">
                <view class="strategy-content">
                    <view class="strategy-title">{{ item.title }}</view>
                    <view class="strategy-desc">{{ item.content }}</view>
                    <view class="strategy-btn">
                        <button class="experience-btn">查看详情</button>
                    </view>
                </view>
                <view class="strategy-image">
                    <image :src="item.productImage" mode="aspectFill"></image>
                </view>
            </view>
            <view class="loading" v-if="loading">加载中...</view>
         
        </scroll-view>
    </view>
</template>

<script>
import { getIntroductionList } from '../../api/introduction.js';

export default {
    data() {
        return {
            searchKeyword: '',
            strategyList: [],
            pageNum: 1,
            pageSize: 10,
            loading: false,
            noMore: false,
            isRefreshing: false,
            timer: null
        }
    },
    onLoad() {
        this.loadData()
    },
    methods: {
        async loadData(refresh = false) {
            if (refresh) {
                this.pageNum = 1
                this.noMore = false
                this.strategyList = []
            }
            
            if (this.loading || this.noMore) return
            
            this.loading = true
            try {
                const params = {
                    title: this.searchKeyword,
                    pageNum: this.pageNum,
                    pageSize: this.pageSize
                }
                
                const res = await getIntroductionList(params)
                const list = res.data.list || []
                
                if (refresh) {
                    this.strategyList = list
                } else {
                    this.strategyList = [...this.strategyList, ...list]
                }
                
                this.noMore = list.length < this.pageSize
                this.pageNum++
            } catch (error) {
                console.error('获取攻略列表失败:', error)
                uni.showToast({
                    title: '获取数据失败',
                    icon: 'none'
                })
            } finally {
                this.loading = false
                if (refresh) {
                    this.isRefreshing = false
                }
            }
        },
        handleSearch() {
            if (this.timer) {
                clearTimeout(this.timer)
            }
            this.timer = setTimeout(() => {
                this.loadData(true)
            }, 300)
        },
        async refresh() {
            this.isRefreshing = true
            await this.loadData(true)
        },
        loadMore() {
            this.loadData()
        },
        handleStrategyClick(item) {
            uni.navigateTo({
                url: `/pages/strategy-detail/strategy-detail?id=${item.id}`
            })
        }
    }
}
</script>

<style lang="scss">
.strategy-container {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding-bottom: 100rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

.favorite-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 288rpx;
    padding-top: var(--status-bar-height);

    .bg-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
}

.header-title {
    width: 88rpx;
    height: 62rpx;
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: 500;
    font-size: 44rpx;
    color: #FFFFFF;
    line-height: 62rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-top: 96rpx;
    padding-left: 36rpx;
}

.search-bar {
    padding: 20rpx 32rpx 32rpx;

    .search-input {
        display: flex;
        align-items: center;
        width: 646rpx;
        height: 76rpx;
        background: #FFFFFF;
        border-radius: 4rpx;
        padding: 0 20rpx;

        .search-icon {
            width: 32rpx;
            height: 32rpx;
            margin-right: 10rpx;
        }

        input {
            flex: 1;
            font-size: 28rpx;
        }

        .placeholder {
            color: #999;
        }
    }
}

.strategy-list {
    margin-top: calc(var(--status-bar-height) + 288rpx + 28rpx);
    padding: 20rpx;
    flex: 1;
    overflow-y: auto;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;

    .strategy-item {
        width: 100%;
        height: 256rpx;
        display: flex;
        justify-content: space-between;
        padding: 20rpx;
        margin-bottom: 20rpx;
        background-color: #FFFFFF;
        border-radius: 8rpx;
        box-sizing: border-box;
        box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .strategy-content {
        flex: 1;
        padding-right: 20rpx;
        overflow: hidden;
    }

    .strategy-image {
        width: 200rpx;
        height: 100%;
        flex-shrink: 0;
    }

    .strategy-image image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4rpx;
    }
    margin-right: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;

    .strategy-title {
        font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
        line-height: 39rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-bottom: 16rpx;
    }

    .strategy-desc {
        font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
        font-weight: 400;
        font-size: 24rpx;
        color: #777777;
        line-height: 34rpx;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .strategy-btn {
        margin-top: 16rpx;
        text-align: left;
        width: 180rpx;
        
        .experience-btn {
            width: 160rpx;
            height: 56rpx;
            line-height: 56rpx;
            background: #FF4444;
            border-radius: 4rpx;
            font-size: 24rpx;
            color: #FFFFFF;
            padding: 0;
        }
    }
}
</style>